<template>
  <div>
    <div id="main" ref="chart"></div>
  </div>
</template>
<script>
import axios from "axios";

var echarts = require("echarts");
export default {
  name: "topology",
  data() {
    return {
      graph: null
    }
  },
  mounted() {
    let _this = this;
    axios.get("http://127.0.0.1:5000/graphchart").then(
        function (response) {
          // this.data = response["data"];
          var chart = echarts.init(_this.$refs.chart);
          chart.setOption(response["data"]);
          chart.on('click', function ff(param) {
            // console.log(param["data"])
            _this.$emit("GetNode", param)
          })
        }
    )

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 55em;
  height: 30em;
  margin-top: 20px;
}

</style>